<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>古风登录页面</title>
	<script type="text/javascript" src="js/vue-2.6.10.js"></script>
	<script type="text/javascript" src="js/axios.js"></script>
    <style>
        body {
            font-family: '微软雅黑', sans-serif;
            background-image: url('images/background.jpg');
            background-size: cover;
        }
        .container {
            width: 300px;
            padding: 16px;
            background-color: white;
            margin: 100px auto;
            border: 1px solid black;
            border-radius: 4px;
        }
        input[type=text], input[type=password] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
        }
        button:hover {
            opacity: 0.8;
        }
    </style>
</head>
<body>
	
	<div class="container" id="from">
		<label for="uname"><b>用户名</b></label>
		<input type="text" placeholder="输入用户名" name="uname" v-model="username">

		<label for="psw"><b>密码</b></label>
		<input type="password" placeholder="输入密码" name="psw" v-model="password">
		<br>
		<span v-text="msg"></span>
		<button type="button" v-on:click="login()">登录</button>
	</div>
    
	<script type="text/javascript">
		let vue = new Vue({
			el: '#from',
			data:{
				username: "",
				password: "",
				msg: ""
			},
			created(){
				
			},methods:{
				login: function(){
					//新建一个FormData对象用于封装数据
					url = '/orderSystem/login.do?username='+vue.username + '&password=' +vue.password;
					axios.get(url).then(
						function(res_obj){
							vue.msg = "";
							//使用获取的数据来给vue对象中的users数据赋值
							alert("数据结果为：" + res_obj.data);
							if(res_obj.data){
								//设置页面地址为首页
								window.location.href = "home.html";
							}else{
								vue.msg = "账号或密码错误";
							}
						}
					).catch(
						function(error_obj){
							alert("网络加载异常！！！");
						}
					)
					
					
					
				}
			}
		});
	
	</script>
</body>
</html>